﻿@{
    Layout = "_LayoutPhone";
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<script src="~/admui-13945148017-1592211513218/public/vendor/lodash/lodash.min.js"></script>
<script src="~/admui-13945148017-1592211513218/public/vendor/breakpoints/breakpoints.min.js"></script>
<script src="~/admui-13945148017-1592211513218/public/themes/global/js/core.js"></script>
<script src="~/admui-13945148017-1592211513218/public/themes/global/js/configs/site-configs.js"></script>
<script src="~/admui-13945148017-1592211513218/public/themes/global/js/components.js"></script>
<script src="~/admui-13945148017-1592211513218/public/themes/base/js/site.js"></script>
<link href="~/admui-13945148017-1592211513218/public/vendor/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="~/admui-13945148017-1592211513218/public/themes/global/js/plugins/responsive-tabs.js"></script>
<script src="~/admui-13945148017-1592211513218/public/vendor/screenfull/screenfull.min.js"></script>
<script src="~/admui-13945148017-1592211513218/public/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="~/admui-13945148017-1592211513218/public/vendor/bootstrap-datepicker/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="~/echarts (1).js"></script>
<script src="~/admui-13945148017-1592211513218/public/js/tsk/sweetalert.min.js"></script>
<style>
    .datepicker {
        background-image: url("");
    }
</style>
<header style="width: 100%; height: 4rem; background-color: rgb(255,135,0);top:0px;position: fixed;z-index: 1;">
    <a href="javascript:void(window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww500458ad942a211f&redirect_uri=http://web.xyufu.cn/PhoneShouYe/ShouYe&response_type=code&scope=snsapi_privateinfo&agentid=1000002&state=STATE#wechat_redirect')">
        <img src="~/GoTRI/img/left.png" alt="" style="float: left;
            width: 1rem;
            height: 2rem;
            margin-left: 1rem;
            margin-top: 1rem;
            position:absolute;
	        left:0px;
	        top:0px;
	        z-index:1;">
    </a>
    <div style=" width: 100%; height: 4rem; line-height: 4rem; text-align: center; color: #fff; font-size: 1.3rem;">带看率</div>
</header>
<div style="width:1px;padding-bottom:50px"></div>
<script>
    $(".yi").attr("hidden", "");
</script>
<span id="panduan" hidden="hidden">@ViewData["panduan"]</span>
<div class="main" style="padding:0;margin:0;width:100%">
    <div class="tab-content">
        <div class="card mb-4" style="background-color: #ffffff;width: 100%;height: auto;">
            @*<div class="form-group col-sm-4" style="margin: 0;">
                    <label class="control-label" for="inputBasicPassword">时间</label>
                    <input type="text" class="form-control empty" autocomplete="off" data-date-format="yyyy-mm-dd" name="" id="ipt_ShiJian" data-plugin="datepicker" data-language="zh-CN" placeholder="请选择时间" />
                </div>*@
            <a style="text-align: right;padding-top:10px;padding-right:10px" onclick="chongzhi()">重置时间</a>@**@
            <div class="form-group " style="margin: 20px 0px;text-align:center">
                <div style="padding-bottom:20px">
                    <span id="shang" onclick="shangxiaye(1)" type="button" style="height:25px;padding: 0px; margin: 0px;font-size:15px"><b><span id="s">上一月</span></b></span>
                    <span style="color:#FFA500;font-size: 25px;padding:0px 0px"><span id="cunzhi"></span><span id="xingqi"></span><span id="jizhou"></span></span>
                    <span id="xia" onclick="shangxiaye(2)" type="button" style="height:25px;padding: 0px; margin: 0px;font-size:15px"><b><span id="x">下一月</span></b></span>
                </div>

                <div style="width: 100%;padding: 0px 30px;margin:0;text-align-last: center;">
                    <button id="nian" onclick="anniu(1)" type="button" class="btn btn-outline btn-default" style="color: #76838f; background-color:#DCDCDC; border-color: #e4eaec; width: 30%;height:30px;padding: 0px; margin: 0px;font-size:16px"><b><soan>年</soan></b></button>
                    <button id="yue" onclick="anniu(2)" type="button" class="btn btn-outline btn-default" style="color: #76838f; background-color:#DCDCDC; border-color: #e4eaec; width: 30%;height:30px;padding: 0px; margin: 0px;font-size:16px"><b><soan>月</soan></b></button>
                    <button id="zhou" onclick="anniu(3)" type="button" class="btn btn-outline btn-default" style="color: #76838f; background-color:#DCDCDC; border-color: #e4eaec; width: 30%;height:30px;padding: 0px; margin: 0px;font-size:16px"><b><soan>周</soan></b></button>
                    @*<button id="ri" onclick="anniu(4)" type="button" class="btn btn-outline btn-default" style="color: #76838f; background-color:#DCDCDC; border-color: #e4eaec; width: 20%; padding: 0px; margin: 0px;font-size:13px"><b><soan>天</soan></b></button>*@
                </div>

                @*<div style="width: 100%;padding: 5px 20px;margin:0;">
                        <span style="width:80%;padding:0px 29%;height:5px"></span>
                    </div>*@

                <div class="main" style="padding: 0; margin: 20px 20px;">
                    <div id="main3" style="width: 100%; height: 200px;">

                    </div>
                </div>


                <div id="yuangong" style="margin:0px 20px;text-align:center;" hidden="hidden">
                    <ul style="font-size:50px">
                        <li style="font-size:17px;color:#ffffff;margin:0;width:100%;height:50px;background-color:#FFA500;border:0.5px solid #FF8C00;list-style: none;float: left;line-height:50px">
                            <span><b>带看率</b></span>
                        </li>
                        <li style="margin:0;width:100%;height:100px;background-color:#FFFFFF;border:0.5px solid #DCDCDC;border-bottom-color:#FFA500;list-style: none;float: left;line-height:100px">
                            <span id="yuangongbeilv"></span>
                        </li>
                    </ul>
                </div>

                <div id="lingdao" style="margin:0px 20px;text-align:center;" hidden="hidden">
                    <ul style="font-size:15px" id="xianshi">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <br />

    <span id="riqi" hidden="hidden"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            //是否为员工
            var panduan = $("#panduan").text();
            if (panduan == "员工") {
                $("#lingdao").attr("hidden", "");
                $("#yuangong").removeAttr("hidden", "");
            } else if (panduan == "领导") {
                $("#yuangong").attr("hidden", "");
                $("#lingdao").removeAttr("hidden", "");
            }

            var riqi = new Date();
            var yue = riqi.getMonth() + 1;
            $("#cunzhi").text(riqi.getFullYear() + "-" + yue);//显示日期
            $("#riqi").text(formatTime(riqi));//隐藏后台需要日期

            //$("#xingqi").text(getWeekDate(riqi));
            //$("#jizhou").text(getWhatweek(getMonthWeek(riqi.getFullYear(), riqi.getMonth() + 1, riqi.getDate())));

            bang($("#riqi").text());
        });

        //饼图
        function bingtu(ZongShu, ChengJiaoShu) {
            var xChart = echarts.init(document.getElementById('main3'));// 柱形图模板二
            var option = {
                title: {
                    text: '你的带看比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['成交', '带看']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: [
                            { value: ChengJiaoShu, name: '成交' },
                            { value: ZongShu, name: '带看' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            xChart.setOption(option);
        }

        //转化率
        function bang(riqi) {
            var ri = new Date(riqi);

            var yue = ri.getMonth() + 1;//月


            var zuiyouyitian = new Date(ri.getFullYear(), yue, 0).getDate()//月的最后一天


            //周的第一天 周的最后一天
            zhou = ri.setDate(ri.getDate() + 1 - ri.getDay());
            zhou2 = ri.setDate(ri.getDate() + 1 - ri.getDay() + 6);
            zhou = new Date(zhou);
            zhou2 = new Date(zhou2);
            formatTime(zhou)
            formatTime(zhou2)
            var z = new Date(zhou);
            var z2 = new Date(zhou2);

            //判断传给什么值
            if ($("#shang").text() == "上一年" || $("#xia").text() == "下一年") {
                var riqikaishi = ri.getFullYear() + '/' + '1' + '/' + '1' + " " + "00" + ":" + "00" + ":" + "00";
                var riqijieshu = ri.getFullYear() + '/' + '12' + '/' + '31' + " " + "23" + ":" + "59" + ":" + "59";
            } else if ($("#shang").text() == "上一月" || $("#xia").text() == "下一月") {
                var riqikaishi = ri.getFullYear() + '/' + yue + '/' + '1' + " " + "00" + ":" + "00" + ":" + "00";
                var riqijieshu = ri.getFullYear() + '/' + yue + '/' + zuiyouyitian + " " + "23" + ":" + "59" + ":" + "59";
            } else if ($("#shang").text() == "上一周" || $("#xia").text() == "下一周") {
                var riqikaishi = ri.getFullYear() + '/' + (z.getMonth() + 1) + '/' + z.getDate() + " " + "00" + ":" + "00" + ":" + "00";
                var riqijieshu = ri.getFullYear() + '/' + (z2.getMonth() + 1) + '/' + z2.getDate() + " " + "23" + ":" + "59" + ":" + "59";
            }


            $.ajax({
                type: 'POST',
                url: '../RenYuan/ReturnZhuanHuaLv',
                async: false,
                dataType: 'json',
                data: { StartTime: riqikaishi, EndTime: riqijieshu },
                success: function (response) {

                    var pan = 1;
                    var lianjie = "<li style='font-size: 17px; color:#ffffff; margin: 0; width: 33%; height: 50px; background-color:#FFA500; border: 0.5px solid #FF8C00; list-style: none; float: left; line-height: 50px'><span><b>姓名</b></span></li><li style='font-size: 17px; color:#ffffff; margin: 0; width: 33%; height: 50px; background-color:#FFA500; border: 0.5px solid #FF8C00; list-style: none; float: left; line-height: 50px'><span><b>职位</b></span></li><li style='font-size: 17px; color:#ffffff; margin: 0; width: 33%; height: 50px; background-color:#FFA500; border: 0.5px solid #FF8C00; list-style: none; float: left; line-height: 50px'><span><b>带看率</b></span></li>";
                    var panduan = $("#panduan").text();


                    $(response).each(function (key) {

                        //判断领导员工
                        if (panduan == "员工") {

                            //员工显示
                            $("#yuangongbeilv").text(response[key].ZhuanHua);
                            bingtu(response[key].ZongShu, response[key].ChengJiaoShu)

                        } else if (panduan == "领导") {

                            //一行一个色  领导显示
                            if (pan == 1) {
                                //拼接显示
                                lianjie += "<li style='margin: 0; width: 33%; height: 40px; background-color:#FFFAF0; border: 0.5px solid #DCDCDC; border-bottom-color:#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].Name + "</span></li ><li style='margin: 0; width: 33%; height: 40px; background-color:#FFFAF0; border: 0.5px solid #DCDCDC; border-bottom-color:#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].GangWei + "</span></li><li style='margin: 0; width: 33%; height: 40px; background-color:#FFFAF0; border: 0.5px solid #DCDCDC; border-bottom-color:#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].ZhuanHua + "</span></li>"
                                pan = 2;//循环走第二个判断

                            } else if (pan == 2) {
                                //拼接显示
                                lianjie += "<li style='margin: 0; width: 33%; height: 40px; background-color:#FFFFFF; border: 0.5px solid #DCDCDC; border-bottom-color:#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].Name + "</span></li><li style='margin: 0; width: 33%; height: 40px; background-color:#FFFFFF; border: 0.5px solid #DCDCDC; border-bottom-color:	#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].GangWei + "</span></li><li style='margin: 0; width: 33%; height: 40px; background-color:#FFFFFF; border: 0.5px solid #DCDCDC; border-bottom-color:#FFA500; list-style: none; float: left; line-height: 40px'><span>" + response[key].ZhuanHua + "</span></li>";
                                pan = 1;//循环走第一个判断

                            }


                        }
                    })


                    $("#xianshi").html(lianjie);

                },
            })
        }

        //日期
        function formatTime(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1, month = month < 10 ? '0' + month : month;
            var day = date.getDate(), day = day < 10 ? '0' + day : day;
            return year + '-' + month + '-' + day;
        }

        //星期几转化
        function getWeekDate(date) {
            var day = date.getDay();
            var weeks = new Array(" 星期7 ", " 星期1 ", " 星期2 ", " 星期3 ", " 星期4 ", " 星期5 ", " 星期6 ");
            var week = weeks[day];
            return week;
        }

        //几周
        function getMonthWeek(a, b, c) {
            const date = new Date(a, parseInt(b) - 1, c)
            const w = date.getDay()
            const d = date.getDate()
            return Math.ceil((d + 6 - w) / 7)
        }

        //几周转化
        function getWhatweek(date) {
            var weeks = new Array("1周", "2周", "3周", "4周", "5周", "6周", "7周");
            var week = weeks[date - 1];
            return week;
        }

        //按钮
        function anniu(canshu) {
            if (canshu == 1) {
                $("#s").text('上一年');

                var date = new Date($("#riqi").text());
                $("#cunzhi").text(date.getFullYear());
                $("#x").text('下一年');
            } else if (canshu == 2) {
                $("#s").text('上一月');
                var date = new Date($("#riqi").text());
                $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1));
                $("#x").text('下一月');
            } else if (canshu == 3) {
                $("#s").text('上一周');
                var date = new Date($("#riqi").text());
                $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + getWhatweek(getMonthWeek(date.getFullYear(), date.getMonth() + 1, date.getDate())));
                $("#x").text('下一周');
            }
            bang($("#riqi").text());
        }

        //调整时间
        function shangxiaye(panduan) {
            var xtsj = new Date();//系统时间
            var date = new Date($("#riqi").text());//改变时间

            if (panduan == 1) {


                if ($("#shang").text() == "上一年" || $("#xia").text() == "下一年") {
                    date = date.setFullYear(date.getFullYear() - 1);
                    date = new Date(date);
                    $("#cunzhi").text(date.getFullYear());
                } else if ($("#shang").text() == "上一月" || $("#xia").text() == "下一月") {
                    date = date.setMonth(date.getMonth() + 1 - 2);
                    date = new Date(date);
                    $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1));
                } else if ($("#shang").text() == "上一周" || $("#xia").text() == "下一周") {
                    //date = date.setDate(date.getDate() + 1 - date.getDay() - 7);//上周一
                    date = date.setDate(date.getDate() + 1 - 8);//当前时间减7
                    date = new Date(date);
                    $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + getWhatweek(getMonthWeek(date.getFullYear(), date.getMonth() + 1, date.getDate())));
                }


                date = new Date(date);
                $("#riqi").text(formatTime(date));
                //$("#xingqi").text(getWeekDate(date));
                //$("#jizhou").text(getWhatweek(getMonthWeek(date.getFullYear(), date.getMonth() + 1, date.getDate())));
            } else if (panduan == 2) {
                var panduan = 0;

                if ($("#shang").text() == "上一年" || $("#xia").text() == "下一年") {
                    date = date.setFullYear(date.getFullYear() + 1);
                    panduan = 1;
                } else if ($("#shang").text() == "上一月" || $("#xia").text() == "下一月") {
                    date = date.setMonth(date.getMonth() + 1);
                    panduan = 2;
                } else if ($("#shang").text() == "上一周" || $("#xia").text() == "下一周") {
                    //date = date.setDate(date.getDate() + 1 - date.getDay() + 7);//下周一
                    date = date.setDate(date.getDate() + 1 + 6);//当前时间加7天
                    panduan = 3;
                }


                date = new Date(date);
                if (panduan == 1) {
                    if (date.getFullYear() > xtsj.getFullYear()) {
                        swal("失败提示!", "暂无时间!", "error");
                    } else {
                        if (formatTime(date) > formatTime(xtsj)) {
                            var riqi = new Date();
                            $("#cunzhi").text(riqi.getFullYear());//显示日期
                            $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
                        } else {
                            $("#riqi").text(formatTime(date));
                            $("#cunzhi").text(date.getFullYear());
                        }
                    }
                } else if (panduan == 2) {
                    bijiao = new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + '1');
                    if (bijiao > xtsj) {
                        swal("失败提示!", "暂无时间!", "error");
                    } else {
                        if (formatTime(date) > formatTime(xtsj)) {
                            var riqi = new Date();
                            $("#cunzhi").text(riqi.getFullYear() + "-" + (riqi.getMonth() + 1));//显示日期
                            $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
                        } else {
                            $("#riqi").text(formatTime(date));
                            $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1));
                        }
                    }
                } else if (panduan == 3) {
                    if (formatTime(date) > formatTime(xtsj)) {
                        swal("失败提示!", "暂无时间!", "error");
                    } else {
                        if (formatTime(date) > formatTime(xtsj)) {
                            var riqi = new Date();
                            $("#cunzhi").text(riqi.getFullYear() + "-" + (riqi.getMonth() + 1) + "-" + getWhatweek(getMonthWeek(riqi.getFullYear(), riqi.getMonth() + 1, riqi.getDate())));//显示日期
                            $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
                        } else {
                            $("#riqi").text(formatTime(date));
                            $("#cunzhi").text(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + getWhatweek(getMonthWeek(date.getFullYear(), date.getMonth() + 1, date.getDate())));
                        }
                    }
                }
                //$("#xingqi").text(getWeekDate(date));
                //$("#jizhou").text(getWhatweek(getMonthWeek(date.getFullYear(), date.getMonth() + 1, date.getDate())));

            }
            bang($("#riqi").text());
        }

        //重置时间
        function chongzhi() {
            var riqi = new Date();
            if ($("#shang").text() == "上一年" || $("#xia").text() == "下一年") {
                $("#cunzhi").text(riqi.getFullYear());//显示日期
                $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
            } else if ($("#shang").text() == "上一月" || $("#xia").text() == "下一月") {
                $("#cunzhi").text(riqi.getFullYear() + "-" + (riqi.getMonth() + 1));//显示日期
                $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
            } else if ($("#shang").text() == "上一周" || $("#xia").text() == "下一周") {
                $("#cunzhi").text(riqi.getFullYear() + "-" + (riqi.getMonth() + 1) + "-" + getWhatweek(getMonthWeek(riqi.getFullYear(), riqi.getMonth() + 1, riqi.getDate())));//显示日期
                $("#riqi").text(formatTime(riqi));//隐藏后台需要日期
            }
            bang($("#riqi").text());


        }




                                                        ////几周
                                                        //function zhouji() {
                                                        //    var date = new Date($("#riqi").text());
                                                        //    var chu = new Date($("#riqi").text());
                                                        //    var dateStart = new Date(chu.setDate(1)); // 本月初
                                                        //    var firstWeek = 1;
                                                        //    if (dateStart.getDay() === 1) {
                                                        //        firstWeek = 1;
                                                        //    } else if (dateStart.getDay() === 0) {
                                                        //        firstWeek = 8 - 7 + 1;
                                                        //    } else {
                                                        //        firstWeek = 8 - dateStart.getDay() + 1;
                                                        //    }
                                                        //    var weekIndex = 1;
                                                        //    var c = date.getDate();
                                                        //    if (date.getDay() === 1 && date.getDate() < 7) {
                                                        //        weekIndex = 1;
                                                        //    } else if (c < firstWeek) {
                                                        //        weekIndex = -1;
                                                        //    } else {
                                                        //        if (c < 7) {
                                                        //            weekIndex = Math.ceil(c / 7);
                                                        //        } else {
                                                        //            c = c - firstWeek + 1;
                                                        //            if (c % 7 === 0) {
                                                        //                if (dateStart.getDay() !== 6) {
                                                        //                    weekIndex = c / 7;
                                                        //                } else {
                                                        //                    weekIndex = c / 7 + 1;
                                                        //                }
                                                        //            } else {
                                                        //                weekIndex = Math.ceil(c / 7);
                                                        //            }
                                                        //        }
                                                        //    }
                                                        //    return weekIndex;
                                                        //}
                                                                            ////按钮年月周日
                                                                            //function anniu(canshu) {
                                                                            //    if ($("#ipt_ShiJian").val() == "") {
                                                                            //        if (canshu == 1) {
                                                                            //            bang($("#nian").val());
                                                                            //        } else if (canshu == 2) {
                                                                            //            bang($("#yue").val());
                                                                            //        } else if (canshu == 3) {
                                                                            //            bang($("#zhou").val());
                                                                            //        } else if (canshu == 4) {
                                                                            //            bang($("#ri").val());
                                                                            //        }
                                                                            //    } else {
                                                                            //        if (canshu == 1) {
                                                                            //            bang($("#ipt_ShiJian").val().substring(0, $("#ipt_ShiJian").val().indexOf("-")));
                                                                            //        } else if (canshu == 2) {
                                                                            //            bang($("#ipt_ShiJian").val().substring(0, $("#ipt_ShiJian").val().indexOf("-") + 3));
                                                                            //        } else if (canshu == 3) {
                                                                            //            var zhou = new Date($("#ipt_ShiJian").val());
                                                                            //            zhou = zhou.setDate(zhou.getDate() + 1 - zhou.getDay());
                                                                            //            zhou = new Date(zhou);
                                                                            //            bang(formatTime(zhou))
                                                                            //        } else if (canshu == 4) {
                                                                            //            bang($("#ipt_ShiJian").val());
                                                                            //        }
                                                                            //    }
                                                                            //}
                                                                            //日期
                                                                            //var riqi = new Date();

                                                                            //var yue = riqi.getMonth() + 1;
                                                                            //$("#nian").val(riqi.getFullYear());
                                                                            //$("#yue").val(riqi.getFullYear() + "/" + yue);
                                                                            //$("#ri").val(riqi.getFullYear() + "/" + yue + "/" + riqi.getDate());

                                                                            //var date = new Date();
                                                                            //date = date.setDate(date.getDate() + 1 - date.getDay());
                                                                            //date = new Date(date);
                                                                            //$("#zhou").val(formatTime(date));

                                                                            ////时间标签
                                                                            //$("#ipt_ShiJian").change(function () {
                                                                            //    if ($("#ipt_ShiJian").val() == "") {
                                                                            //        bang(formatTime(riqi));
                                                                            //    } else {
                                                                            //        bang($("#ipt_ShiJian").val());
                                                                            //    }
                                                                            //});

                                                                            ////方法
                                                                            //bingtu()
                                                                            //bang(formatTime(riqi))
    </script>
